<template>
    <view>

        <view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-tr-24 coreshop-border-radius-bl-24" v-if="listData && count">

            <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30">
                <view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{coreshopdata.parameters.title}}</view>
                <u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" @tap="goServicesList()"></u-icon>
            </view>
            <view class="coreshop-divider">
                <view class="left"></view>
                <text class="dot">●</text>
                <view class="right"></view>
            </view>

            <view class="img-list-item coreshop-flex-direction-row coreshop-margin-bottom-10 bg-main coreshop-text-black" v-for="(item, key) in listData" :key="key" @click="goServicesDetail(item.id)">
                <view class="img-list-item-l">
                    <u--image :src="item.thumbnail" :index="item.id" width="100px" height="100px"></u--image>
                </view>
                <view class="img-list-item-r">
                    <view class="coreshop-font-14 coreshop-text-bold u-line-1 title">{{item.title}}</view>
                    <view class="coreshop-font-12 u-line-2 coreshop-margin-top-10 coreshop-margin-bottom-10">{{item.description}}</view>
                    <view class="item-c coreshop-flex coreshop-justify-between">
                        <view class="red-price coreshop-justify-between">
                            ￥{{item.money}}
                        </view>
                        <!--<u-count-down :time="item.lastTime" format="HH:mm:ss"></u-count-down>-->
                        <view class="coreshop-text-right coreshop-time-right" v-if="item.openStatus == 1 && item.lastTime > 0">
                            <u-count-down :time="item.lastTime*1000" :autoStart="true" format="DD天HH时mm秒ss" @change="onChange($event,key)">
                                <view class="time coreshop-font-11">
                                    <view class="coreshop-font-12">仅剩：</view>
                                    <view class="time__custom">
                                        <text class="time__custom__item">{{ item.timeData.days }}</text>
                                    </view>
                                    <text class="time__doc">天</text>
                                    <view class="time__custom">
                                        <text class="time__custom__item">{{ item.timeData.hours>10?item.timeData.hours:'0'+item.timeData.hours}}</text>
                                    </view>
                                    <text class="time__doc">:</text>
                                    <view class="time__custom">
                                        <text class="time__custom__item">{{ item.timeData.minutes }}</text>
                                    </view>
                                    <text class="time__doc">:</text>
                                    <view class="time__custom">
                                        <text class="time__custom__item">{{ item.timeData.seconds }}</text>
                                    </view>
                                </view>
                            </u-count-down>
                        </view>
                        <view class="coreshop-text-right coreshop-time-right" v-if="item.openStatus == 2 && item.lastTime > 0">
                            <u-count-down :time="item.lastTime*1000" :autoStart="true" format="DD天HH时mm秒ss" @change="onChange($event,key)">
                                <view class="time">
                                    <view class="coreshop-font-12">即将开始：</view>
                                    <view class="time__custom">
                                        <text class="time__custom__item">{{ item.timeData.days }}</text>
                                    </view>
                                    <text class="time__doc">天</text>
                                    <view class="time__custom">
                                        <text class="time__custom__item">{{ item.timeData.hours>10?item.timeData.hours:'0'+item.timeData.hours}}</text>
                                    </view>
                                    <text class="time__doc">:</text>
                                    <view class="time__custom">
                                        <text class="time__custom__item">{{ item.timeData.minutes }}</text>
                                    </view>
                                    <text class="time__doc">:</text>
                                    <view class="time__custom">
                                        <text class="time__custom__item">{{ item.timeData.seconds }}</text>
                                    </view>
                                </view>
                            </u-count-down>
                        </view>
                        <view class="coreshop-font-12 red-price" v-if="item.openStatus == 3">已结束</view>

                        <!--<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between">
                            <view class="coreshop-font-12 red-price" v-if="item.status == 3">已结束</view>
                            <view class="coreshop-font-12 red-price" v-if="item.status == 2">即将开始</view>
                            <u-icon name="shopping-cart" color="#2979ff" size="25" class="btnCart"></u-icon>
                        </view>-->
                    </view>
                </view>
            </view>

        </view>
    </view>

</template>

<script>
    export default {
        name: "coreshopservice",
        data() {
            return {
                listData: [],
            }
        },
        props: {
            coreshopdata: {
                // type: Array,
                required: false,
            }
        },
        mounted() {
            this.listData = uni.$u.deepClone(this.coreshopdata.parameters.list);
        },
        computed: {
            count() {
                return (this.listData.length > 0)
            }
        },
        methods: {
            onChange(e, key) {
                //this.item.timeData = uni.$u.deepClone(e);
                this.$set(this.listData[key], 'timeData', e)
                //    this.$forceUpdate();
            },
        },
    }
</script>

<style lang="scss" scoped>
    .img-list-item { position: relative; overflow: hidden;
        .img-list-item-l { width: 100px; height: 100px; display: inline-block; float: left; }
        .img-list-item-r { width: calc(100% - 120px); display: inline-block; margin-left: 7.5px; float: left; position: relative;
            .title { line-height: 24px; }
            .item-c { width: 100%; margin-top: 0;
                .red-price { color: #FF7159 !important; }
                .btnCart { float: right; }
            }
        }
    }

    .time { display: flex; align-items: center;
        .time__custom { min-width: 18px; height: 18px; background-color: #3c9cff; border-radius: 4px; display: flex; justify-content: center; align-items: center;
            .time__custom__item { color: #fff; font-size: 10px; text-align: center; }
        }
    }
</style>
